<template>
    <div class="pop-remaining-win">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="item.name" :name="item.id" v-for="item in tabs" :key="item.id">
                <div class="remaining-box comm-list" v-infinite-scroll="loadFun">
                    <template v-if="list.length > 0">
                        <div class="remaining-row" v-for="item in list" :key="item.id"
                            @click.stop="myproRecordFun(item)">
                            <div class="left-box">
                                <div class="info-box">
                                    <div class="title">
                                        <span class="bold">{{ item.title }}</span>
                                    </div>
                                    <div class="font_size14">
                                        <span>卡号： {{ item.cardno }} </span>
                                    </div>
                                    <div class="gtxt" v-if="item.gd_ls && item.gd_ls.length > 0">
                                        <span>包含： {{item.gd_ls.length > 6 ? item.gd_ls.slice(0,
                                            6).map(v => v.gdname).join(',') + '等等服务' :
                                            item.gd_ls.map(v => v.gdname).join(',')}} </span>
                                    </div>
                                    <div class="gtxt flex_row">
                                        <div
                                            :style="{ background: item.setting.color || 'blue', color: 'white', padding: '0px 6px', borderRadius: '5px', fontSize: '12px' }">
                                            {{ item.type_txt }} </div>
                                        <div class="ml10">剩余： {{ item.times_left }}/{{ item.times }} 次</div>
                                    </div>
                                    <div class="gtxt">
                                        <span>有效期： {{ item.timeend_txt }} </span>
                                    </div>
                                </div>
                            </div>
                            <div class="right-box">
                                <div class="but-box" v-show="activeName == 1 || activeName == 12">
                                    <el-button plain size="mini" @click.stop="goAppointmentClick(item)">去预约</el-button>
                                </div>
                            </div>
                        </div>
                    </template>
                    <empty v-else></empty>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- <el-dialog class="reservationis-dialog-box" title="预约记录" :visible.sync="reservationisShow" width="500px"
            :append-to-body="true" :modal-append-to-body="false">
            <div class="reservationis-box">
                <div class="reservationis-name-div">
                    <span>{{ myproRecordInfo.customer_info.name }}</span>
                    <span> {{ myproRecordInfo.customer_info.cellphone }}</span>
                </div>
                <div class="reservationis-good-box">
                    <div class="reservationis-good-div">
                        <img :src="myproRecordInfo.goods_img_big || 'https://cdn.imiyun.com/static/yd/imgs/g-default.png'"
                            alt="">
                        <div class="reservationis-good-txt">
                            <p>{{ myproRecordInfo.title }}</p>
                            <p>剩余{{ myproRecordInfo.serv_left }}次</p>
                        </div>
                    </div>
                </div>
                <div v-if="myproRecordList">
                    <div class="reservationis-order-box" v-for="(item, index) in myproRecordList" :key="index">
                        <div class="reservationis-order-div">
                            <span>预约号：{{ item.no }}</span>
                            <span>{{ item.atime_txt }}</span>
                        </div>
                        <div class="reservationis-order-p">
                            <p><span>{{ item.staff_info.name }}</span> <span>{{ item.staff_info.cellphone }}</span></p>
                            <p><span>{{ item.serv_qty_book }}次</span> <span>{{ item.serv_total_book }}元</span></p>
                        </div>
                    </div>
                </div>
                <empty v-else></empty>
            </div>
        </el-dialog> -->
    </div>
</template>

<script>
import staticConst from "../../js/const/StaticConst.js";
import config from "../../js/conf/Config.js";
import empty from "@/components/comm/empty.vue";
export default {
    components: {
        empty,
    },
    name: "popRemainingWinTab",
    props: {
        customId: {
            type: String,
            default: ''
        },
        isDialog: {
            type: Boolean,
            default: false
        },
        customInfo: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            activeName: "1",
            reservationisShow: false,
            is_soll: false,
            img_buf: staticConst.GOOD_IMG,
            pfrom: 0,
            list: [],
            tabs: [
                {
                    id: "1",
                    name: "未消费",
                },
                {
                    id: "12",
                    name: "消费中",
                },
                {
                    id: "3",
                    name: "消费完",
                },
                {
                    id: "4",
                    name: "已失效",
                },
            ],
            myproRecordInfo: {
                customer_info: {},
            },
            myproRecordList: [],
        };
    },
    methods: {
        initData() {
            this.dialogVisible = true;
            this.pfrom = 0;
            this.is_soll = false;
            this.list = [];
            this.getCardMycardList();
        },
        handleClick() {
            this.pfrom = 0;
            this.is_soll = false;
            this.list = [];
            this.getCardMycardList();
        },
        loadFun() {
            if (this.is_soll) return;
            this.pfrom += 20;
            this.getCardMycardList();
        },
        async getCardMycardList() {
            this.is_soll = true;
            let param = {
                customerid: this.customId,
                st: Number(this.activeName),
                pfrom: this.pfrom,
                pnum: 20,
            };
            let res = await this.$api({ url: config.YY_CARD_MYCARD_LS, data: param });
            console.log("res.data.ls===", res.data.ls)
            if (res.status == 1 && res.data.ls) {
                this.list = this.list.concat(res.data.ls);
            } else {
                this.is_soll = true;
            }
            setTimeout((v) => {
                this.is_soll = false;
            }, 500);
        },

        goAppointmentClick(item) {
            console.log("item===", item)
            let data = {
                projectData: item.gd_ls,
                customerInfo: this.customInfo,
                customerid: item.customerid
            };
            data.projectData = data.projectData.map((v) => {
                return {
                    ...v,
                    serv_qty: 0,
                    proid: v.gdid,
                    title: v.gdname,
                    serv_left: Number(v.serv_left),
                }
            });
            console.log("data=x---------xxxxxx==", data)
            // 将数据存储到 store 中，而不是通过 URL 传递
            this.$store.commit('common/setAppointmentData', data);
            // 只传递必要的参数
            uni.navigateTo({
                url: `/pages/customerAppoint/index?act=5&serType=cardServe`,
            });
        },

        async myproRecordFun(row) {
            let url = config.YY_YUYUE_BOOK_MYPRO_RECORD;
            let param = {
                proid: row.id,
                pfrom: 0,
                pnum: 20,
            };
            let res = await this.$api({ url: url, data: param });
            if (res.status == 1 && res.data) {
                this.myproRecordList = res.data.ls;
                this.myproRecordInfo = res.data.info;
                this.reservationisShow = true;
            }
            console.log(res)
        }
    },
};
</script>

<style lang="scss" scoped>
.reservationis-dialog-box {
    ::v-deep .el-dialog__body {
        padding: 0;
    }
}

.pop-remaining-win {
    .remaining-box {
        height: 400px;
        overflow: auto;

        .remaining-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-right: 10px;
            cursor: pointer;

            .left-box {
                display: flex;

                .img-box {
                    width: 80px;
                    height: 80px;
                    margin-right: 15px;
                    border-radius: 5px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .info-box {
                    .title {
                        font-size: 16px;
                    }

                    .gtxt {
                        width: 400px;
                        font-size: 14px;
                        color: #999999;
                    }
                }
            }

            .right-box {
                .but-box {}
            }
        }
    }

    ::v-deep .el-dialog__body {
        padding-top: 0 !important;
    }
}

.reservationis-box {
    width: 100%;
    min-height: 400px;

    div {
        box-sizing: border-box;
    }

    background: #f4f4f4;

    .reservationis-name-div {
        width: 100%;
        height: 40px;
        line-height: 40px;
        padding: 0 15px;
        background: #FFFFFF;
        margin-bottom: 10px;

        span {
            margin-right: 5px;
        }
    }

    .reservationis-good-box {
        width: 100%;
        padding: 0 15px;
        background: #FFFFFF;
        margin-bottom: 10px;

        .reservationis-good-div {
            width: 100%;
            display: flex;
            padding: 10px 0;

            img {
                width: 80px;
                height: 80px;
                margin-right: 10px;
                border: 1px solid #f4f4f4;
            }

            .reservationis-good-txt {
                height: 80px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                padding: 8px 0;
            }
        }
    }

    .reservationis-order-box {
        width: 100%;
        background: #FFFFFF;
        margin-bottom: 10px;

        &:last-child {
            margin-bottom: 0;
        }

        .reservationis-order-div {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
            padding: 0 15px;
            border-bottom: 1px solid #F4F4F4;
        }

        .reservationis-order-p {
            width: 100%;
            padding: 0 15px;

            span {
                margin-right: 20px;
            }

            p {
                width: 100%;
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
</style>